<template>
    <view class="container">
        <view v-if="stepsIndex == 3 && tipshow" class="tip">
            <view>非个体户完善相关企业信息，有助于通过审核</view>
            <view class="rotate" @click="tipshow = false">+</view>
        </view>
        <view class="steps">
            <view class="flex">
                <image style="width: 56rpx; height: 56rpx" src="/pages_supplier/static/check.png"></image>
                <text class="active-text">基础资料</text>
            </view>
            <view>
                <image
                    v-show="stepsIndex >= 2"
                    style="width: 120rpx; height: 8rpx"
                    src="/pages_supplier/static/lineset_a.png"></image>
                <image
                    v-show="!(stepsIndex >= 2)"
                    style="width: 120rpx; height: 8rpx"
                    src="/pages_supplier/static/lineset.png"></image>
            </view>
            <view class="flex">
                <image
                    v-show="stepsIndex >= 2"
                    style="width: 56rpx; height: 56rpx"
                    src="/pages_supplier/static/check.png"></image>
                <view v-show="!(stepsIndex >= 2)" class="number">2</view>
                <text :class="stepsIndex >= 2 ? 'active-text' : ''">银行信息</text>
            </view>
            <view>
                <image
                    v-show="stepsIndex >= 3"
                    style="width: 120rpx; height: 8rpx"
                    src="/pages_supplier/static/lineset_a.png"></image>
                <image
                    v-show="!(stepsIndex >= 3)"
                    style="width: 120rpx; height: 8rpx"
                    src="/pages_supplier/static/lineset.png"></image>
            </view>
            <view class="flex">
                <image
                    v-show="stepsIndex >= 3"
                    style="width: 56rpx; height: 56rpx"
                    src="/pages_supplier/static/check.png"></image>
                <view v-show="!(stepsIndex >= 3)" class="number">3</view>
                <text :class="stepsIndex >= 3 ? 'active-text' : ''">企业信息</text>
            </view>
        </view>
        <view v-show="stepsIndex == 1">
            <view class="from">
                <view class="from-list">
                    <view class="label"><text class="red">*</text>店铺名称</view>
                    <view class="value"
                        ><input
                            type="text"
                            placeholder="请输入店铺名称"
                            v-model="from.name"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label"><text class="red">*</text>联系人</view>
                    <view class="value"
                        ><input
                            type="text"
                            placeholder="请输入联系人"
                            v-model="from.contactName"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label"><text class="red">*</text>所在地区</view>
                    <view class="value flex-v-c" @click="areaSelectFn">
                        <view class="flex-fill" :class="regionName == '请选择省/市/区/街道' ? 'color-gray-3' : ''">{{
                            regionName
                        }}</view>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                </view>
                <view class="from-list">
                    <view class="label"><text class="red">*</text>详细地址</view>
                    <!-- <input type="text" v-model="from.contactAddress" placeholder="请输入联系地址" placeholder-style="color:#999"> -->
                    <view class="dingwei">
                        <textarea
                            class="value-textarea"
                            v-model="from.contactAddress"
                            placeholder="请先选择定位"
                            placeholder-style="color:#999;"></textarea>
                        <view class="btn-location" @click="selectAddress">
                            <image src="/static/img/map.png"></image>
                            <text>{{ from.lat ? "已定位" : "添加定位" }}</text>
                        </view>
                    </view>
                </view>
                <view class="from-list">
                    <view class="label"><text class="red">*</text>法人身份证号</view>
                    <view class="value"
                        ><input
                            type="text"
                            placeholder="请输入法人身份证号"
                            v-model="from.legalPersonCard"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label"><text class="red">*</text>法人身份证</view>
                    <view class="value imgbox" style="display: flex">
                        <img-item
                            :data="legalPersonCardImg1"
                            @chooseImage="legalPersonCard1"
                            text="身份证正面"
                            :num="1"></img-item>
                        <img-item
                            :data="legalPersonCardImg2"
                            @chooseImage="legalPersonCard2"
                            text="身份证反面"
                            :num="1"></img-item>
                    </view>
                </view>
                <view class="from-list">
                    <view class="label"><text class="red">*</text>营业执照号</view>
                    <view class="value"
                        ><input
                            type="text"
                            v-model="from.licenesNo"
                            placeholder="请输入营业执照号"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label"><text class="red">*</text>营业执照</view>
                    <view class="value imgbox" style="display: flex">
                        <img-item :data="licenseImg1" @chooseImage="license1" text="执照正面" :num="1"></img-item>
                        <img-item :data="licenseImg2" @chooseImage="license2" text="执照反面" :num="1"></img-item>
                    </view>
                </view>
            </view>
            <view class="footer"><button class="btn btn-success" @click="nextTwo">下一步</button></view>
        </view>
        <view v-show="stepsIndex == 2">
            <view class="from">
                <view class="from-list">
                    <view class="label"><text class="red">*</text>银行名称</view>
                    <view class="value"
                        ><input
                            type="text"
                            v-model="from.bankName"
                            placeholder="请输入银行名称"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label"><text class="red">*</text>银行账号</view>
                    <view class="value"
                        ><input
                            type="text"
                            v-model="from.bankAccount"
                            placeholder="请输入银行账号"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label"><text class="red">*</text>开户姓名</view>
                    <view class="value"
                        ><input
                            type="text"
                            v-model="from.bankUserName"
                            placeholder="请输入开户姓名"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label">开户行许可证</view>
                    <view class="value imgbox">
                        <img-item :data="from.openLicenseImgs" @chooseImage="openLicenseImgs" :num="1"></img-item>
                        <text class="tips">支持gif,jpg,jpeg,bmg,png</text>
                    </view>
                </view>
            </view>
            <view class="footer"
                ><button class="btn btn-success-hollow" @click="stepsIndex = 1">上一步</button
                ><button class="btn btn-success" @click="nextThree">下一步</button></view
            >
        </view>
        <view v-show="stepsIndex == 3">
            <view class="from">
                <view class="from-list">
                    <view class="label">企业logo</view>
                    <view class="value imgbox">
                        <img-item :data="logoimg" @chooseImage="chooseImage" :num="1"></img-item>
                        <text class="tips">支持gif,jpg,jpeg,bmg,png(建议尺寸200*200)</text>
                    </view>
                </view>
                <view class="from-list">
                    <view class="label">企业主营类目</view>
                    <view class="value"
                        ><input
                            type="text"
                            placeholder="请输入企业主营类目"
                            v-model="from.types"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label">企业性质</view>
                    <view class="value"
                        ><input
                            type="text"
                            v-model="from.companyNature"
                            placeholder="请输入企业性质"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label">成立时间</view>
                    <view class="value flex-v-c" @click="openStarDate">
                        <view class="flex-fill" :class="startDate == '' ? 'color-gray-3' : ''">{{
                            startDate == "" ? "请输入成立/注册时间" : startDate
                        }}</view>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                </view>
                <view class="from-list">
                    <view class="label">注册资金</view>
                    <view class="value"
                        ><input
                            type="number"
                            v-model="from.regCapital"
                            placeholder="请输入注册资金（元）"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label">企业规模(人)</view>
                    <view class="value"
                        ><input
                            type="number"
                            v-model="from.companySize"
                            placeholder="请输入企业规模(人)"
                            placeholder-style="color:#999"
                    /></view>
                </view>
                <view class="from-list">
                    <view class="label">企业面积</view>
                    <view class="value"
                        ><input
                            type="number"
                            v-model="from.factorySize"
                            placeholder="请输入企业面积(㎡)"
                            placeholder-style="color:#999"
                    /></view>
                </view>
            </view>
            <view class="desc">
                <view class="title">企业介绍</view>
                <textarea v-model="from.description"></textarea>
            </view>
            <view class="footer"
                ><button class="btn btn-success-hollow" @click="stepsIndex = 2">上一步</button
                ><button class="btn btn-success" @click="submit">确认提交</button></view
            >
        </view>
        <!-- 		<view class="from">	
			<view class="from-list">
				<view class="label"><text class="red">*</text>税务登记号</view>
				<view class="value"><input type="text" v-model="from.taxId" placeholder="请输入税务登记号" placeholder-style="color:#999"></view>
			</view>
			<view class="from-list">
				<view class="label">税务登记照</view>
				<view class="value imgbox">
					<img-item :data="from.taxIdImgs" @chooseImage="taxIdImgs" :num="1"></img-item>
					<text class="tips">支持gif,jpg,jpeg,bmg,png</text>
				</view>
			</view>
			<view class="from-list">
				<view class="label">一般纳税人资格信息</view>
				<view class="value imgbox">
					<img-item :data="from.taxPersonnelImgs" @chooseImage="taxPersonnelImgs" :num="1"></img-item>
					<text class="tips">支持gif,jpg,jpeg,bmg,png</text>
				</view>
			</view>
		</view> -->

        <!-- <view class="footer"><button class="btn btn-success" @click="submit">提交审核</button></view> -->
        <uni-popup ref="areaSelect" type="bottom" background-color="#fff" :safe-area="false">
            <area-select :address-data="data" @pickArea="pickArea"></area-select>
        </uni-popup>
        <uni-calendar :date="startDate" ref="startDate" :insert="false" @confirm="confirmStarDate"> </uni-calendar>
    </view>
</template>

<script>
import storage from "@/uni-sub-base/utils/storage.js"
import { Apply, mapbatchSmartParse } from "@/pages_supplier/service/api/supplier.js"
import areaSelect from "@/uni-sub-base/components/area-select/area-select.vue"
import imgItem from "@/pages_supplier/components/form/img-item.vue"
export default {
    components: {
        areaSelect,
        imgItem,
    },
    data() {
        return {
            stepsIndex: 1,
            tipshow: true,
            from: {
                name: "",
                contactName: "",
                contactTel: "",
                contactAddress: "",
                companyNature: "",
                types: "",
                legalPersonCard: "",
                regCapital: 0,
                licenesNo: "",
                taxId: "",
                taxIdImgs: "",
                taxPersonnelImgs: "",
                openLicenseImgs: "",
                bankName: "",
                bankAccount: "",
                bankUserName: "",
                companySize: 0,
                factorySize: null,
                description: "",
            },
            regionName: "请选择省/市/区/街道",
            startDate: "",
            data: {
                AddressName: "",
                ContactName: "",
                ContactTel: "",
                ContactAddress: "",
                IsDefault: false,
                ProvinceId: 0,
                ProvinceName: "",
                CityId: 0,
                CityName: "",
                AreaId: 0,
                AreaName: "",
                StreetId: 0,
                StreetName: "",
                ZipCode: null,
            },
            logoimg: "",
            businessimg: "",
            info: "",
            legalPersonCardImg1: "",
            legalPersonCardImg2: "",
            licenseImg1: "",
            licenseImg2: "",
        }
    },
    onLoad(e) {
        this.from.contactTel = e.tel
        this.from.companyId = e.companyId
    },
    mounted() {},
    methods: {
        nextTwo() {
            if (this.from.name == "") {
                this.easyToast("请输入店铺名称")
                return false
            }
            if (this.from.contactName == "") {
                this.easyToast("请输入联系人")
                return false
            }
            if (this.regionName == "请选择省/市/区/街道") {
                this.easyToast("请选择省/市/区/街道")
                return false
            }
            if (this.from.contactAddress == "") {
                this.easyToast("请输入联系地址")
                return false
            }
            if (!this.from.lat) {
                this.easyToast("请添加定位地址")
                return false
            }
            if (this.from.legalPersonCard == "") {
                this.easyToast("请输入法人身份证号")
                return false
            }
            if (this.legalPersonCardImg1 == "") {
                this.easyToast("请上传身份证正面照")
                return false
            }
            if (this.legalPersonCardImg2 == "") {
                this.easyToast("请上传身份证反面照")
                return false
            }
            if (this.from.licenesNo == "") {
                this.easyToast("请输入营业执照号")
                return false
            }
            if (this.licenseImg1 == "") {
                this.easyToast("请上传营业执照正面照")
                return false
            }
            if (this.licenseImg2 == "") {
                this.easyToast("请上传营业执照反面照")
                return false
            }
            this.stepsIndex = 2
        },
        nextThree() {
            if (this.from.bankName == "") {
                this.easyToast("请输入银行名称")
                return false
            }
            if (this.from.bankAccount == "") {
                this.easyToast("请输入银行账号")
                return false
            }
            if (this.from.bankUserName == "") {
                this.easyToast("请输入开户姓名")
                return false
            }
            this.stepsIndex = 3
        },
        //选择地区
        areaSelectFn() {
            this.$refs.areaSelect.open()
        },
        //选择地区回调
        pickArea(data) {
            this.$refs.areaSelect.close()
            this.data = Object.assign(this.data, data)
            this.getRegionName()
        },
        getRegionName() {
            let line = "-"
            this.regionName = `${this.data.ProvinceName || ""}-${this.data.CityName || ""}${
                this.data.AreaName ? line + this.data.AreaName : ""
            }${this.data.StreetName ? line + this.data.StreetName : ""}`
            // this.data.ProvinceName?this.data.ProvinceName:'' +
            // this.data.CityName?"-"+this.data.CityName:''+
            // this.data.AreaName?"-"+this.data.AreaName:''+
            // this.data.StreetName?"-"+this.data.StreetName:''
        },
        openStarDate() {
            //打开选择日期
            this.$refs.startDate.open()
        },
        confirmStarDate(e) {
            //选择开始日期
            this.startDate = e.fulldate
        },
        chooseImage(index, value) {
            this.logoimg = value
        },
        legalPersonCard1(index, value) {
            this.legalPersonCardImg1 = value
        },
        legalPersonCard2(index, value) {
            this.legalPersonCardImg2 = value
        },
        license1(index, value) {
            this.licenseImg1 = value
        },
        license2(index, value) {
            this.licenseImg2 = value
        },
        taxIdImgs(index, value) {
            this.from.taxIdImgs = value
        },
        taxPersonnelImgs(index, value) {
            this.from.taxPersonnelImgs = value
        },
        openLicenseImgs(index, value) {
            this.from.openLicenseImgs = value
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        selectAddress() {
            uni.navigateTo({
                url: "/pages/map/map-poi",
                events: {
                    getSelectData: (data) => {
                        this.getmapP(data)
                        console.log(data)
                        this.from.contactAddress = data.address.replace(/\\/g, "")
                        this.from.lng = data.location.longitude
                        this.from.lat = data.location.latitude
                    },
                },
            })
        },
        getmapP(res) {
            let item = {
                ContactAddress: res.address,
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                StreeName: "",
                ContactName: "aaa",
                ContactTel: "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        //智能识别
        batchSmartParse(param) {
            mapbatchSmartParse(param).then((res) => {
                if (res.Data && res.Data.list && res.Data.list.length > 0) {
                    let result = res.Data.list[0]
                    this.data.ProvinceId = result.ProvinceId
                    this.data.ProvinceName = result.ProvinceName
                    this.data.CityId = result.CityId
                    this.data.CityName = result.CityName
                    this.data.AreaId = result.AreaId
                    this.data.AreaName = result.AreaName
                    this.data.StreetId = 0
                    this.data.StreetName = ""
                    this.getRegionName()
                }
            })
        },
        fromVerify() {
            if (this.from.companyNature == "") {
                this.easyToast("请输入企业性质")
                return false
            }
            if (this.startDate == "") {
                this.easyToast("请输入成立/注册时间")
                return false
            }
            if (this.from.types == "") {
                this.easyToast("请输入企业主营类目")
                return false
            }

            if (this.from.regCapital == "") {
                this.easyToast("请输入注册资金（元）")
                return false
            }

            if (this.from.taxId == "") {
                this.easyToast("请输入税务登记号")
                return false
            }

            if (this.from.companySize == "") {
                this.easyToast("请输入企业规模(人)")
                return false
            }
            if (this.from.factorySize == "") {
                this.easyToast("请输入企业面积")
                return false
            }
            if (this.logoimg == "") {
                this.easyToast("请上传企业logo")
                return false
            }
            if (this.from.description == "") {
                this.easyToast("请输入企业介绍")
                return false
            }
            return true
        },
        submit() {
            let param = this.from
            param.provinceId = this.data.ProvinceId
            param.provinceName = this.data.ProvinceName
            param.cityId = this.data.CityId
            param.cityName = this.data.CityName
            param.regionId = this.data.AreaId
            param.regionName = this.data.AreaName
            param.streetId = this.data.StreetId
            param.streetName = this.data.StreetName
            param.logo = this.logoimg
            param.legalPersonCardImgs = this.legalPersonCardImg1 + "," + this.legalPersonCardImg2
            param.licenseImg = this.licenseImg1 + "," + this.licenseImg2
            param.regDate = this.startDate
            param.userName = this.from.contactTel
            param.factorySize = +this.from.factorySize
            param.companySize = +this.from.companySize
            param.lng = +this.from.lng
            param.lat = +this.from.lat
            param.regCapital = +this.from.regCapital

            let path = "?ValidCode=&valid_type=8"
            Apply(param, path).then((res) => {
                if (res.State == 1) {
                    this.easyReLaunch("/pages_supplier/packet/shopEnter/result?tel=" + res.Msg)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
}
</script>

<style lang="scss">
.container {
    padding-bottom: 140rpx;
}
.red {
    color: red;
}
.tip {
    height: 88rpx;
    display: flex;
    padding: 0 24rpx;
    background: #fdfbec;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #fe6430;

    .rotate {
        transform: rotate(45deg);
        font-size: 40rpx;
    }
}

.from {
    margin-bottom: 28rpx;
    .from-list {
        padding: 0 24rpx;
        min-height: 112rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: #ffffff;
        border-bottom: 1rpx solid $uni-border-bottom-color;

        .label {
            width: 200rpx;
            font-size: 30rpx;
            color: $color-gray-1;
        }
        .value {
            flex: 1;
            font-size: 30rpx;
            color: #323232;
        }
        .imgbox {
            margin-top: 32rpx;
            .tips {
                font-size: 20rpx;
                color: #ccc;
                display: block;
                margin: -30rpx 0 32rpx 0;
            }
        }
    }
    .imgcode {
        width: 178rpx;
        height: 66rpx;
    }
}
.color-gray-3 {
    color: $color-gray-3;
}
.desc {
    padding: 0 24rpx 24rpx;
    background: #ffffff;
    font-size: 30rpx;
    color: $color-gray-1;
    .title {
        height: 112rpx;
        display: flex;
        align-items: center;
    }
    textarea {
        width: calc(100% - 48rpx);
        background: #f5f5f5;
        padding: 22rpx 24rpx;
    }
}
.footer {
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 6rpx 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
        margin: 0 30rpx;
        width: 304rpx;
    }
}
.dingwei {
    background: #f6f7f7;
    border-radius: 8rpx;
    padding: 24rpx 0;
    margin: 24rpx 0;
    width: calc(100% - 200rpx);
    flex: 1;
}
.btn-location {
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 100rpx;
    justify-content: flex-end;
    color: #333333;
    image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
    }
}
.value-textarea {
    width: 100%;
    height: 100rpx;
    margin-bottom: 10rpx;
}
.flex-fill {
    font-size: 32rpx;
}
.steps {
    padding: 32rpx 80rpx;
    display: flex;
    justify-content: space-between;
    .flex {
        flex-direction: column;
        align-items: center;
    }
    .active-line {
        height: 56rpx;
    }

    text {
        color: #999999;
    }

    .active-text {
        color: $app-color-main;
    }

    .line {
        width: 40rpx;
        height: 2rpx;
        background: rgba(255, 255, 255, 0.6);
        margin-top: 32rpx;
    }

    .number {
        height: 46rpx;
        width: 46rpx;
        margin: 5rpx;
        font-size: 28rpx;
        background: #999999;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        border-radius: 50%;
    }
}
</style>
